웹 프론트 아키텍팅

개요

• 웹 프론트 최적화 방법들
  • 번들 사이즈
  • 런타임 성능
• 서비스 아키텍쳐 구성방법

Micro Frontend

• 장점을 살린 제대로된 Micro Frontend를 구축하려면 많은 소통과 세심한 설계가 필요할것 같다. 특히 팀이 크고 여러 서비스를 다룰 수록 더 조심해야할 것이다. 그렇지 않으면 금방 [[Micro Frontends Anarchy]] 에 빠져버린다.
• 과도한 모던 프레임워크/기술스택 선호가 오히려 웹을 안좋은 방향으로 이끌어가는 듯한 기분이 들때가있다.
  • 비슷한 의견의 블로그 글
  • Jake Archibald 아재 또한 그런 얘기를 한다.
• Micro Frontends - extending the microservice idea to frontend development
• 요근래는 astro 가 인기인 듯

bundle size optimization

• Reduce Next.js Bundle Size by Half
• Building Partially Hydrated, Progressively Enhanced Static Websites with Isomorphic Preact and Eleventy - Markus Oberlehner
• Making Websites Small
• [[TypeScript Enum을 쓰지 않는게 좋은 이유]]

runtime performances

• [[Web Vitals]]
• [[링크를 새 탭에 열때 성능 챙기기, rel=noopener에 대해]]
• CSS GPU가속 이해하기
• getElementById vs querySelector
• Memory leaks: the forgotten side of web performance | Read the Tea Leaves

media

• [[다국어 지원시 폰트는 어떻게 처리할까]]
• [[이제는 Google Fonts와 작별할 시간]]
• 고해상도 이미지를 올바르게 제공하기